Day 27：Google Map 範本學習(2)

13th鐵人賽

HKT 線上教室

2021-09-27 08:14:48

2061 瀏覽

分享至

本篇文章同步發表在 HKT 線上教室部落格，線上影音教學課程已上架至 Udemy 和 Youtube 頻道。另外，想追蹤更多相關技術資訊，歡迎到臉書粉絲專頁按讚追蹤喔～

今天我們來看看，在昨天 Google Map 範本範例當中，被加入了哪些程式，即可以快速完成地圖標示的 APP。到時我們口罩地圖專案，要加入 Google Map 地圖應用，如法炮製即可。

申請金鑰

昨天我們是透過範本的範例連結過來設定申請金鑰，今天我們自己前往 Google API Console，登入 Google 帳號，選擇新建專案或選舊有專案 → 憑證 → API 。即可以產生新的 key。

設定金鑰

產生新的金鑰後，可以點擊金鑰名，即可以進入該筆金鑰進行設定，可以更改金鑰名稱、綁定APP套件名稱與 SHA1 憑證指紋，防止別人冒用。

取得 SHA1 憑證指紋

快速取得 SHA1 憑證指紋方法，可以點擊 Android Studio 右側的 Gradle 視窗，展開後可以找到 app -> Tasks -> android -> signingReport，直接執行此腳本，即可以取得本機正式、測試 keystore 等相關憑證指紋。

輸出結果

添加 map 依賴庫 (dependencies)

implementation 'com.google.android.gms:play-services-maps:17.0.0'

加入金鑰

在 AndroidManifest.xml ，加入在 Google API Console 申請到的金鑰。需加入在裡面子項目中。

<meta-data
    android:name="com.google.android.geo.API_KEY"
    android:value="@string/google_maps_key" />

畫面佈局

在 activity_maps.xml 加入 fragment 標籤，最關鍵是 android:name 需要設定為：「com.google.android.gms.maps.SupportMapFragment」

 <fragment
        android:id="@+id/map"
        android:name="com.google.android.gms.maps.SupportMapFragment"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".MapsActivity" />

MapsActivity

onCreate 起來獲取 map 的 View 為 mapFragment，然後呼叫 getMapAsync 初始化地圖。

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContentView(R.layout.activity_maps)

    val mapFragment = supportFragmentManager
            .findFragmentById(R.id.map) as SupportMapFragment
    mapFragment.getMapAsync(this)
}

MapsActivity 實作 OnMapReadyCallback ，當 Map 準備好，則會回呼(CallBack) onMapReady，我們在裡面透過地圖提供的 addMarker 方法，加入一個雪梨的圖釘座標。並透過 moveCamera 方法，將手機地圖畫面移動到此處。

class MapsActivity : AppCompatActivity(), OnMapReadyCallback {

...
...
...

override fun onMapReady(googleMap: GoogleMap) {
    mMap = googleMap

    // Add a marker in Sydney and move the camera
    val sydney = LatLng(-34.0, 151.0)
    mMap.addMarker(MarkerOptions().position(sydney).title("Marker in Sydney"))
    mMap.moveCamera(CameraUpdateFactory.newLatLng(sydney))
 }
}